import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'
// 导入登录组件
// const Login = () => {
//   return import('@/views/Login')
// }
// const Login = () => import('@/views/Login')
// Login()
// 导入layout组件  ctrl+ 右箭头 一个单词跳跃   fn + 右箭头 行位
const Login = () => import('@/views/Login')
const Layout = () => import('@/views/Layout')
// 导入搜索组件
const Search = () => import('@/views/Search')
// 导入layout组件中四个子路由组件
const Home = () => import('@/views/Layout/Home')
const Question = () => import('@/views/Layout/Question')
const Video = () => import('@/views/Layout/Video')
const User = () => import('@/views/Layout/User')
// 导入搜索结果组件
const Result = () => import('@/views/Search/components/SearchResult')
const Article = () => import('@/views/article')
const userProfile = () => import('@/views/Layout/User/components/userProfile')
const userChat = () => import('@/views/Layout/User/components/userChat')
// 导入store
Vue.use(VueRouter)
// const Search = () => import('@/views/search')

const router = new VueRouter({
  routes: [
    // 配置登录组件的路由规则
    { path: '/login', component: Login },
    {
      path: '/',
      component: Layout,
      // 嵌套路由
      children: [
        // meta 路由元信息
        { path: '/', component: Home, meta: { isKeepAlive: true } },
        // path: '/question/:id' /:id是挖坑 将来路由跳转的时候填这个坑
        // { path: '/question/:id/:name', component: Question, props: true },
        { path: '/question', component: Question, name: 'video' },
        { path: '/video', component: Video },
        { path: '/user', component: User }
      ]
    },
    { path: '/search', component: Search },
    { path: '/result', component: Result },
    // props 解耦 路由开启props传参
    { path: '/article/:id', component: Article, props: true },
    { path: '/userProfile', component: userProfile },
    { path: '/userChat', component: userChat }

  ]
})
// 获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
// 修改原型对象中的push方法
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
// to 是去哪里 to是一个路由信息对象
// from 从哪来 也是一个路由信息对象
// next()  next('/login')
// 校验token的页面列表
const AuthLinks = ['/user', '/cart', '/userInfo']
router.beforeEach((to, from, next) => {
  const tokeninfo = store.state.user.tokenInfo.token
  // 如果要去登录并且token存在了移动端用户不需要看到登录页面了
  if (to.path === '/login' && tokeninfo) {
    next('/')
    return
  }
  // 如果访问 用户中心 页面有权限
  if (AuthLinks.includes(to.path)) {
    // 1.分支能进来说明访问的是有权限的页面
    // 2. 先判断你是否token令牌
    const token = store.state.user.tokenInfo.token
    if (token) {
      // 有token直接放行
      next()
    } else {
      // 没有token 先去登录页面登录直接这样设置有一个问题登录成功之后就直接去首页了(登录成功后返回上一看的页面)
      // next()不仅可以传递 /路径 还可以传对象的方式
      // this.$router.push('/xxx')  this.$router.push({path:'/xx'})
      next({
        path: '/login',
        query: {
          // to.fullPath就是我之前想去的页面的完整路径(路径中带的有路由地址和路由参数)
          backTo: to.fullPath
        }
      })
    }
  } else {
    // 不需要权限的页面 直接放行
    next()
  }
})
export default router
